<template>
	<view class="classlist">
		<!-- 轮播图 -->
		<view class="swiper">
			<swiper :indicator-dots="true" circular="true" indicator-color="#fff" indicator-active-color="#ccc"
				:autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item,index) in banner" :key="index">
					<view class="swiper-item">
						<image :src="item.url | getImg" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 导航栏 -->
		<view class="nav">
			<view class="nav-tab" v-for="(item,index) in navlist" :key="index"
				@click="toPage(`/pages/index/shop?type=${type}&class=${item.id}`)">
				<view class="navbox">
					<image :src="item.img_url | getImg" mode=""></image>
					<text>{{item.name}}</text>
				</view>
			</view>
		</view>
		<view class="list" v-if="list.length != 0">
			<view class="item" v-for="(item,index) in list" :key="index"
				@click="toPage('/pages/index/transfer?type='+item.type+'&id='+item.id)">
				<image :src="item.logo | getImg" mode="aspectFill" @click.stop="seeImg(item.logo)"></image>
				<view class="info">
					<view class="name">
						{{item.title}}
					</view>
					<view class="phone">
						店主姓名: {{item.name}}
					</view>
					<view class="phone">
						联系方式: <text @click.stop="callPhone(item.phone)">拨打电话</text>
					</view>
					<view class="phone">
						地址: {{item.shop_address}}
					</view>
					<view class="phone">
						距离: {{item.distance}}
					</view>
				</view>
			</view>
		</view>
		<view class="no-list" v-else>
			- 暂无数据 -
		</view>
	</view>
</template>

<script>
	import {
		Home,
		SShop
	} from "@/api/api.js"
	export default {
		data() {
			return {
				navlist: [{
						name: '余额实体店',
						img: '/static/icon/s1.png',
						url: '/pages/index/shop?type=1'
					},
					{
						name: '积分实体店',
						img: '/static/index/st2.png',
						url: '/pages/index/shop?type=2'
					},
				],
				banner: [],
				list: [],
				page: 1,
				last_page: 1,
				type: 1,
				title: ''
			}
		},
		onLoad() {
			this.IndexGoods()
			this.SShop()
		},
		onReachBottom() {
			if (this.page < this.last_page) {
				this.page++
				this.SShop()
			}
		},
		methods: {
			seeImg(img) {
				uni.previewImage({
					urls: [this.$config.websiteUrl + img]
				})
			},
			callPhone(i) {
				uni.makePhoneCall({
					phoneNumber: i
				})
			},
			SShop() {
				SShop({
					page: this.page,
				}).then(res => {
					if (res.status == 1) {
						this.list = this.list.concat(res.data.List.data)
						this.last_page = res.data.List.last_page
						this.navlist = res.data.class
					}
				})
			},
			IndexGoods() {
				Home().then(res => {
					if (res.status == 1) {
						this.banner = res.data.banner
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		padding-top: 10px;
		box-sizing: border-box;
	}

	.left_ul {
		display: flex;
		flex-wrap: wrap;
		margin-top: 10px;
		padding: 10px;
	}

	.swiper {
		height: 200px;
		border-radius: 10px;

		swiper {
			height: 200px;
		}

		.swiper-item {
			text-align: center;

			image {
				width: 100%;
				margin: 0 auto;
				height: 200px;
				border-radius: 5px;
			}
		}
	}

	.nav {
		display: flex;
		width: 96%;
		margin: 0 auto;
		margin-top: 10px;
		background: #fff;
		border-radius: 8px;
		padding: 10px 0;
		box-sizing: border-box;
		overflow-x: scroll;
		white-space: nowrap;

		.nav-tab {
			display: inline;
			width: 70px;
			margin: 5px 0;

			.navbox {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 70px;
			}

			image {
				width: 50px;
				height: 50px;
				margin-bottom: 6px;
				border-radius: 8px;
			}

			text {
				font-size: 12px;
				color: #666;
			}
		}
	}

	.list {
		padding: 10px;

		.item {
			display: flex;
			background: #fff;
			border-radius: 5px;
			padding: 6px 10px;
			box-sizing: border-box;
			align-items: center;
			margin-bottom: 10px;

			image {
				width: 80px;
				height: 80px;

			}

			.info {
				flex: 1;
				padding: 0 15px;
				box-sizing: border-box;

				.name {
					font-size: 14px;
					margin-bottom: 3px;
					font-weight: bold;
				}

				.phone {
					font-size: 12px;
					color: #777;
					margin-bottom: 3px;
				}
			}

			button {
				width: 70px;
				height: 35px;
				line-height: 35px;
				font-size: 13px;
				background: #E1ECFE;
				color: #6b7490;
				font-weight: bold;
			}
		}
	}
</style>